<template>
	<view class="content">
		<view class="flex-tab">
			<view class="flex">
				<view class="item" v-for="item in categoryList" :key="item.category_id" :class="{'gradient-text': item.category_id == activeCate}" @click="onClickCate(item.category_id)">{{ item.name }}</view>
			</view>
		</view>
		<scroll-view class="list-wrap" scroll-y refresher-enable @scrolltolower="scroll" v-if="list.length">
			<view class="scroll-item" v-for="item in list" :key="item.article_id" @click="onDetail(item.article_id)">
				<view class="item-title" v-if="item.createTime">{{ item.createTime }}</view>
				<view class="item-content">
					<image mode="aspectFit" class="item-cover" :src="item.image_url"></image>
					<text>{{ item.title }}</text>
					<view class="van-multi-ellipsis--l2" v-if="item.desc">{{ item.desc }}</view>
				</view>
			</view>
		</scroll-view>
		<!-- <InfoDialog></InfoDialog> -->
	</view>
</template>

<script>
	import InfoDialog from '../../components/info-dialog/info-dialog.vue'
	import { mapState } from 'vuex'
	export default {
		components: {
			InfoDialog
		},
		
		computed: {
			...mapState({
				list: state => state.index.list,
				activeCate: state => state.index.activeCate,
				categoryList: state => state.index.categoryList
			})
		},
		
		onLoad() {
			this.getInfoDialogFlag()
			this.getCategoryList()
		},
		
		// 下拉刷新
		onPullDownRefresh() {
			this.$store.dispatch('index/reload')
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1200)
		},
		
		methods: {
			onClickCate(id) {
				this.$store.dispatch('index/setCurrCate', id)
			},
			
			async getArticleList() {
				await this.$store.dispatch('index/getArticleListByCate')
			},
			
			async getCategoryList() {
				await this.$store.dispatch('index/getArticleCate')
			},
			
			async getInfoDialogFlag() {
				await this.$store.dispatch('index/getDialogFlag')
			},
			
			scroll() {
				this.getArticleList()
			},
			
			onDetail(id) {
				uni.navigateTo({
					url: '/pages/article/article?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.flex-tab {
		height: 60rpx;
		padding: 20rpx;
		overflow-x: scroll;
		overflow-y: hidden;
		background-color: #fff;
		
		.flex {
			display: flex;
			align-items: center;
			
			.item {
				position: relative;
				width: 100rpx;
				margin: 0 10rpx;
				font-size: 40rpx;
				left: 1.8;
				color: #666666;
				text-align: center;
				
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					right: 100%;
					height: 2rpx;
					background-image: linear-gradient(to right, #60d8d2, #478ce4);
					transition: all ease .3s;
				}
				
				&.gradient-text::after {
					right: 0;
				}
			}
		}
	}
		
	.list-wrap {
		margin-top: 80rpx;
		background: #ededed;
		
		.scroll-item {
			position: relative;
			margin: 20rpx;
			
			.item-title {
				text-align: center;
				color: #c6c6c6;
				font-size: 24rpx;
				line-height: 36rpx;
				margin-bottom: 10rpx;
			}
			
			.item-content {				
				margin-bottom: 40rpx;
				border-radius: 20rpx;
				overflow: hidden;
				font-size: 20rpx;
				line-height: 44rpx;
				padding-bottom: 20rpx;
				background: #fff;
				
				view {
					margin: 0 20rpx;
				}
			}
			
			.item-cover {
				height: 208rpx;
				width: 100%;
			}
			
			text {
				color: #545454;
				font-size: 28rpx;
				line-height: 60rpx;
				margin: 0 20rpx;
			}
		}
	}
</style>
